<template>
  <div class="classification" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">分类管理</div>
    </div>
    <div class="cityComponent">
      <div class="cityCon" style="width: 30%">
        <div class="cityTit">
          <span>一级分类</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(1)"><a-icon type="plus" />添加分类</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in list" :class="cateIndex === index?'active city':'city'" @click="listChange(index)">
            <div class="city_name">{{item.name}}</div>
            <div class="city_btn" v-if="cateIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,1,item.name,item.id,item)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCates(index,1,item.name,item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cityCon" style="width: 69%">
        <div class="cityTit">
          <span>二级分类</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(2)"><a-icon type="plus" />添加分类</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in listChild" :class="childIndex === index?'active city':'city'" @click="childIndex = index">
            <div class="city_name">{{item.name}}</div>
            <div class="city_btn" v-if="childIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,2,item.name,item.id)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCates(index,1,item.name,item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      cancelText="关闭"
      okText="保存">
      <div style="display:flex;align-items:center">
        <span style="margin-right:16px">{{type === 1?'一级':'二级'}}分类：</span>
        <a-input v-model="value" style="width: 200px" />
        <a-radio-group v-if="type === 1" v-model="radioValue" style="margin-left:15px">
          <a-radio :value="1">
            假发
          </a-radio>
          <a-radio :value="2">
            产品
          </a-radio>
        </a-radio-group>
      </div>
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  export default {
    name:'region',
    data(){
      return {
        visible:false,
        type:1,
        title:'添加分类',
        value:'',
        radioValue:1,
        loading:false,
        list:[],
        listChild:[],
        cateIndex:0,
        childIndex:0,
        id:0,
        tab:1,
        jurisdiction:[
          { key:'admin-good-classification-add', back:'add'},
          { key:'admin-good-classification-update', back:'update'},
          { key:'admin-good-classification-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction)
    },
    methods:{
      removeCates(index,type,name,id){
        this.$confirm({
          title: '确定删除当前分类?',
          cancelText: '取消',
          okText:'删除',
          onOk:()=> {
            this.Api.removeCates({},id).then(res=>{
              if(res.code !== 200) return this.$message.info(res.msg);
              this.$message.success(res.msg);
              if(type === 1 && this.cateIndex>0){
                this.cateIndex = this.cateIndex -1
              }
              if(type === 1 && this.cateIndex === 0){
                this.cateIndex = this.cateIndex +1
              }
              this.getList()
            })
          }
        })
      },
      editCity(index,type,name,id,item){
        this.radioValue = item.event_type;
        this.type = type;
        this.value = name;
        this.title = '编辑分类';
        this.visible = true;
        this.id = id;
        this.tab = 2
      },
      listChange(index){
        this.cateIndex = index;
        this.listChild = this.list[index].child
      },
      modalChange(type){
        this.loading = true;
        let data = {
          pid: this.type !==1?this.list[this.cateIndex].id:0,
          type: 2,
          name: this.value,
          picture:'',
          event_type:this.radioValue
        };
        if(this.type === 2) data.event_type = '';
        if(this.id) data.id = this.id;
        if(type === 1) return this.visible = false;
        if(this.tab === 1) return this.Api.addCates(data).then(res=>{
          if(res.code !== 200){
            this.$message.info(res.msg);
            return this.loading = false;
          }
          this.$message.success(res.msg);
          this.getList();
          this.loading = false;
          this.visible = false;
        });
        this.Api.editCates(data,this.id).then(res=>{
          if(res.code !== 200){
            this.$message.info(res.msg);
            return this.loading = false;
          }
          this.$message.success(res.msg);
          this.getList();
          this.loading = false;
          this.visible = false;
        })
      },
      appendCity(type){
        this.type = type;
        this.title = '添加分类';
        this.visible = true;
        this.value = '';
        this.id = 0;
        this.tab = 1
      },
      getList(){
        this.Api.cates({type:2}).then(res=>{
          if(res.code !== 200) return;
          this.list = res.data;
          this.listChild = res.data[this.cateIndex].child
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .classification{
    .cityComponent{
      display: flex;
      .cityCon{
        width: calc(25% - 16px);
        background: #ffffff;
        .cityList{
          height: calc(100% - 55px);
          padding: 24px;
          box-sizing: border-box;
          overflow-y: scroll;
          .active{
            color:#006AFF;
            display: flex;
            justify-content: space-between;
            .city_name{
              font-size: 14px;
              font-weight: bold;
            }
            .city_btn{
              span{
                margin-right: 16px;
              }
            }
          }
          .city{
            padding: 12px 0;
            cursor: pointer;
          }
          .city:nth-child(1){
            padding-top: 0;
          }
        }
        .cityList::-webkit-scrollbar {display:none}
        .cityTit{
          height: 55px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px;
          box-sizing: border-box;
          border-bottom: 1px solid #E9E9E9;
          span{
            color: #333333;
            font-size: 18px;
            font-weight: bold;
          }
        }
        .city{

        }
      }
    }
  }
</style>
